<template>
  <div class="dashboard-editor-container">
    <panel-group :list="PanelGroup"></panel-group>
    <to-do v-model="setline" ref="todo">
      <template slot="tabs">
        <el-radio-group v-model="setline" size="small" @change="handleSetLineChartData">
          <el-radio-button border :label="`all`">用户总量</el-radio-button>
        </el-radio-group>
      </template>
    </to-do>
  </div>
</template>

<script>
import handleSetLineChartData from '@/util/chart';

export default {
  name: 'StatisticsText',
  mixins: [handleSetLineChartData],
  data () {
    return {
      api: 'userChart',
      setline: 'all',
      PanelGroup: [{
        name: '用户总量',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0,
        }
      }],
      chartData: {
        time: [],
        total: []
      }
    };
  },
  created () {
    this.getData();
  },
  methods: {
    async getData () {
      const { code, data, message } = await this.$API.userStatistics();

      if (code === 200) {
        const { viewStatistics } = data;

        if (viewStatistics) {
          this.$set(this.PanelGroup, 0, {
            name: '用户总量',
            viewStatistics: {
              allData: viewStatistics.total,
              nData: viewStatistics.today,
              yData: viewStatistics.yesterday,
              tb: ((viewStatistics.today - viewStatistics.yesterday) / (viewStatistics.yesterday || 1) * 100).toFixed(2),
            }
          });
        }
      } else {
        this.$message.error(message || '异常错误');
      }
    },
  }
};
</script>
<style lang="less" scoped>
.dashboard-editor-container {
  padding: 5px 15px 25px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
